<template>
	<div>
		<a-button class="editable-add-btn" @click="handleAdd">Add</a-button>
		<!-- <a-table bordered :dataSource="dataSource" :columns="columns"> -->
		<!-- <template slot="name" slot-scope="text, record">
				<editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
			</template> -->
		<!-- 	<template slot="operation" slot-scope="text, record">
				<a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="() => onDelete(record.key)">
					<a href="javascript:;">Delete</a>
				</a-popconfirm>
			</template>
		</a-table> -->

		<sp-table :columns="columns" :dataSource="dataSource"></sp-table>

	</div>
</template>
<script>
	import SpTable from '@/components/Table';
	import {
		queryRoleList
	} from '@/axios/service/roleApi'
	/*
	 * EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue
	 */
	export default {
		name: "AnRoleLsit",
		components: {
			SpTable,
		},
		mounted() {
			this.queryRoleList()
			
		},
		data() {
			return {
				dataSource:[],
				columns: [{
						title: '角色',
						dataIndex: 'roleName',
						width: '30%',
						
					},
					{
						title: '角色类型',
						dataIndex: 'roleType',
					},
					{
						title: '角色编码',
						dataIndex: 'roleCode',
					},
					{
						title: '备注',
						dataIndex: 'remark',
						// scopedSlots: {
						// 	customRender: 'operation'
						// },
					},
				],
			};
		},
		methods: {
			onCellChange(key, dataIndex, value) {
				const dataSource = [...this.dataSource];
				const target = dataSource.find(item => item.key === key);
				if (target) {
					target[dataIndex] = value;
					this.dataSource = dataSource;
				}
			},
			onDelete(key) {
				const dataSource = [...this.dataSource];
				this.dataSource = dataSource.filter(item => item.key !== key);
			},
			queryRoleList() {
				var params = {};
				// params.method = "0";
				queryRoleList(params).then((data) => {
					window.console.log(data)
					if (data.status == 0) {
						this.dataSource = data.result;
					}

				}).catch(function(error) {
					window.console.log(error)
				});
			},
			handleAdd() {
				const {
					count,
					dataSource
				} = this;
				const newData = {
					key: count,
					name: `Edward King ${count}`,
					age: 32,
					address: `London, Park Lane no. ${count}`,
				};
				this.dataSource = [...dataSource, newData];
				this.count = count + 1;
			},
		},
	};
</script>
<style>
	.editable-cell {
		position: relative;
	}

	.editable-cell-input-wrapper,
	.editable-cell-text-wrapper {
		padding-right: 24px;
	}

	.editable-cell-text-wrapper {
		padding: 5px 24px 5px 5px;
	}

	.editable-cell-icon,
	.editable-cell-icon-check {
		position: absolute;
		right: 0;
		width: 20px;
		cursor: pointer;
	}

	.editable-cell-icon {
		line-height: 18px;
		display: none;
	}

	.editable-cell-icon-check {
		line-height: 28px;
	}

	.editable-cell:hover .editable-cell-icon {
		display: inline-block;
	}

	.editable-cell-icon:hover,
	.editable-cell-icon-check:hover {
		color: #108ee9;
	}

	.editable-add-btn {
		margin-bottom: 8px;
	}
</style>